
<template>
    <div class="container" :style="{ backgroundImage: `url(${url})` }">
        <template v-if="path == 'primary'">
            <div class="header">
                <img alt="" class="back" :src="url1" @click="goBack('/book')" />
                <div class="title-wrap">
                    <img alt="" :src="url2" />
                    <span class="title" :style="{ color: titleColor() }">单元词汇表</span>
                </div>
            </div>
            <div class="content">
                <template v-if="list.length == 1">
                    <div class="card-wrap1">
                        <div class="card" v-for="(item, index) in list" @click="onClickDetail(item, index)">
                            <span v-html="item.name"></span>
                            <img src="../public/assets/expression/yuyin_tb_5_pt@2x.png" alt="">
                        </div>
                    </div>
                </template>
                <template v-else-if="list.length == 2">
                    <div class="card-wrap2">
                        <div class="card" v-for="(item, index) in list" @click="onClickDetail(item, index)">
                            <span v-html="item.name"></span>
                            <img src="../public/assets/expression/yuyin_tb_5_pt@2x.png" alt="">
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="card-wrap3">
                        <div class="card" v-for="(item, index) in list" @click="onClickDetail(item, index)">
                            <span v-html="item.name"></span>
                            <img src="../public/assets/expression/yuyin_tb_5_pt@2x.png" alt="">
                        </div>
                    </div>
                </template>
            </div>
        </template>
        <template v-else>
            <div class="header">
                <img alt="" class="back" :src="url1" @click="goBack('/book')" />
                <span class="title-middle" :style="{ color: titleColor() }">单元词汇表</span>
            </div>
            <div class="content-list">
                <div class="card " v-for="(item, index) in list" @click="onClickDetail(item, index)">
                    <span v-html="item.name"></span>
                </div>
            </div>
        </template>
    </div>
    <Dialog :open="recordingOpen">
        <div class="dialog-wrap">
            <div class="pop-card-wrap1">
                <div class="pop-card animation" @click="onclickGoto('./vocabularyAfterRead')">
                    <img :src="url3" alt="">
                    <span>跟读</span>
                </div>
                <div class="pop-card animation" @click="onclickGoto('/Spelling_page')">
                    <img :src="url4" alt="">
                    <span>拼写</span>
                </div>
                <div class="pop-card animation" @click="onclickGoto('/practice_page')">
                    <img :src="url5" alt="">
                    <span>练习</span>
                </div>
                <button class="close-button" @click="recordingOpen = false"></button>
            </div>
        </div>
    </Dialog>
</template>

<script setup>
import { reactive, toRefs, onMounted } from 'vue'
import { useRouter, onBeforeRouteLeave, useRoute } from 'vue-router';
import { ref } from 'vue'
import Dialog from "../component/dialog/index.vue";
import { getVocabularyListApi } from "../api/expression.js"
import vocabularyStore from '../store/vocabulary.js'

const router = useRouter();

const route = useRoute();
const path = window.gradeId > 61 ? 'middle' : 'primary';

const recordingOpen = ref(false);
const currentItem = ref(null);
const currentIndex = ref(0)

function goBack(url) {
    // router.push(url); 
    router.go(-1);
}

// const list = voc;
// // console.log(list);

const state = reactive({
    list: [],
});

const { list } = toRefs(state);

const getVocabularyList = async () => {
    // state.list = voc;
    try {
        const res = await getVocabularyListApi();
        console.log(res);
        state.list = res.data;
        console.log('state.list', state.list);

        if (vocabularyStore.currentItem) {
            onClickDetail(vocabularyStore.currentItem, vocabularyStore.currentIndex);
        }
    } catch (error) {
    }
}

onMounted(() => {
    getVocabularyList();
});

const onClickDetail = (item, index) => {
    recordingOpen.value = true;
    currentItem.value = item;
    currentIndex.value = index;
}

const onclickGoto = (path) => {
    router.push({
        path,
        query: {
            id: currentItem.value.id,
            name: currentItem.value.unit ? currentItem.value.unit : `Unit ${currentIndex.value + 1}`,
            // name: currentItem.value.name
        }
    });
}

const pathList = ['/vocabularyAfterRead', '/Spelling_page', '/practice_page']
onBeforeRouteLeave((to, from) => {
    let isStore = pathList.indexOf(to.path) != -1;
    if (isStore) {
        vocabularyStore.currentItem = currentItem;
        vocabularyStore.currentIndex = currentIndex;
    } else {
        vocabularyStore.currentItem = null;
        vocabularyStore.currentIndex = 0;
    }
})


const titleColor = () => {
    if (path == 'middle') {
        return '#222'
    } else {
        return '#fff'
    }
    // switch (path) {
    //     case '51':
    //         return '#fff'
    //     case '81':
    //         return '#222'
    //     default:
    //         return '#fff'
    // }
}

const url = new URL(`../public/assets/vocabulary/${path}/bg.png`, import.meta.url).href;
const url1 = new URL(`../public/assets/book/${path}/back.png`, import.meta.url).href;
const url2 = new URL(`../public/assets/vocabulary/${path}/tb.png`, import.meta.url).href;

const url3 = new URL(`../public/assets/vocabulary/${path}/pop1.png`, import.meta.url).href;
const url4 = new URL(`../public/assets/vocabulary/${path}/pop2.png`, import.meta.url).href;
const url5 = new URL(`../public/assets/vocabulary/${path}/pop3.png`, import.meta.url).href;

</script>

<style scoped>
.container {
    /* background-image: url("../public/assets/dc_bj_1_pt@2x.png"); */
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    /* box-sizing: border-box; */
    position: relative;
    /* display: flex;
    flex-direction: column; */
}

.header {
    height: 15%;
    position: relative;
    /* overflow: hidden; */
    /* padding-top: 1.5%; */
    /* margin-top: 2%; */
}

.back {
    cursor: pointer;
	left: 2%;
	position: absolute;
	top: 1.5rem;
	width: 2.5rem;
    /* margin-left: 2%; */
}

.title-wrap {
    position: absolute;
    left: 50%;
	top: 1.6rem;
    transform: translateX(-50%);
}

.title-wrap img{
    height: 3.85rem;
}

.title {
    /* background-image: url('../public/assets/dc_tb_1_pt@2x.png'); */
    /* background-size: cover; */
    color: #FFFFFF;
    /* width: 16vw; */
    /* height: 4.792vw;
    line-height: 4.792vw; */
    font-size: 1.8rem;
    /* top: 4%; */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    width: 100%;
    text-align: center;
    /* height: 100%;
    line-height: 100%;
    text-align: center; */

    position: absolute;
    left: 50%;
    top: 54%;
    transform: translate(-50%,-50%);
}

.title-middle {
    color: #FFFFFF;

    font-size: 1.8rem;
    /* width: 100%; */
    text-align: center;

    position: absolute;
    left: 50%;
	top: 3rem;
    transform: translate(-50%,-50%);
}

.content-list {
    height: 80%;
    /* flex: 1; */
    /* display: flex;
    flex-wrap: wrap;
    align-content: flex-start; */
    width: 80%;
    margin: 0 auto;
    overflow: auto;
}

.content-list .card {
    box-sizing: border-box;
    /* width: calc((100% - 18rem) / 3);
    height: calc((100vw - 18rem) / 6); */
    background-color: #FFFFFF;
    border-radius: 0.8rem;
    margin: 0 1rem 1rem 1rem;
    padding: 1rem;
    position: relative;
    /* display: flex;
    flex-direction: column; */
}

.content-list .card span {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    font-family: 'text-en';
}

/*HTML5 元素超出部分滚动, 并隐藏滚动条*/
.content-list::-webkit-scrollbar {
    display: none;
}

.content-list::-webkit-scrollbar {
    width: 0px;
}

.content {
    height: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* width: 80%; */

    /* align-items: center; */
    /* padding-top: 4rem; */
}

.card-wrap1 {
    width: 85%;
    /* margin: 0 auto; */
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    /* align-content: flex-start; */
    justify-content: center;
    align-items: center;
}
.card-wrap1 .card {
    box-sizing: border-box;
    width: calc((100% - 4rem - 1px) / 3);
    height: 12rem;
    /* width: 21rem;
    height: 12rem; */
    background-color: #FFFFFF;
    border-radius: 1rem;
    /* margin: 1rem; */
    /* margin-right: 2rem;
    margin-bottom: 2rem; */
    padding: 2rem;
    position: relative;
    display: inline-block;
    font-family: 'text-en';
}

.card-wrap2 {
    width: 85%;
    /* margin: 0 auto; */
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    /* align-content: flex-start; */
    justify-content: center;
    align-items: center;
}
.card-wrap2 .card {
    box-sizing: border-box;
    width: calc((100% - 4rem - 1px) / 3);
    height: 12rem;
    /* width: 21rem;
    height: 12rem; */
    background-color: #FFFFFF;
    border-radius: 1rem;
    /* margin: 1rem; */
    margin-left: 2rem;
    margin-right: 2rem;
    /* margin-bottom: 2rem; */
    padding: 2rem;
    position: relative;
    display: inline-block;
    font-family: 'text-en';
}

.card-wrap3 {
    width: 85%;
    /* margin: 0 auto; */
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.card-wrap3 .card {
    box-sizing: border-box;
    width: calc((100% - 4rem - 1px) / 3);
    height: 12rem;
    /* width: 21rem;
    height: 12rem; */
    background-color: #FFFFFF;
    border-radius: 1rem;
    /* margin: 1rem; */
    margin-right: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    position: relative;
    display: inline-block;
    font-family: 'text-en';
}

.card-wrap3 .card:nth-child(3n + 3) {
    margin-right: 0rem;
    margin-bottom: 0rem;
}

.card span {
    font-size: 1.6rem;
    /* line-height: 1.3rem; */
    font-weight: bold;
    color: #333;
}

.card img {
    width: 6rem;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}

.dialog-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.dialog-wrap .pop-card-wrap1 {
    position: absolute;
    top: 50%;
    left: 20%;
    /* right: 20%; */
    width: 60%;
    /* height: 30%; */
    transform: translateY(-50%);
    /* background-color: #FFFFFF; */
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.dialog-wrap .pop-card-wrap1 .pop-card {
    position: relative;
    cursor: pointer;
}

.dialog-wrap .pop-card-wrap1 .pop-card:hover {
    transform: scale(1.1);
}

.dialog-wrap .pop-card-wrap1 .pop-card img {
    width: 11.3rem;
}

.dialog-wrap .pop-card-wrap1 .pop-card span {
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, -50%);
    color: #333;
    font-size: 1.4rem;
}

.close-button {
    /* 设置按钮的宽度和高度 */
    width: 2.4rem;
    height: 2.4rem;
    background-color: transparent;
    /* 背景图片填充按钮 */
    background-image: url('../public/assets/vocabulary/ty_an_22_pt@2x.png');
    /* 确保图片覆盖按钮区域 */
    background-size: cover;
    /* 确保点击区域覆盖整个按钮 */
    padding: 0;
    /* 隐藏按钮自带的边框 */
    border: none;
    /* 设置鼠标悬停时的背景图片 */
    background-position: center;
    transition: background-position 0.5s;

    position: absolute;
    bottom: -40%;
    left: 50%;
    transform: translate(-50%, -50%);

    cursor: pointer;

}

.animation {
    animation: scale 0.35s linear;
    -webkit-animation: scale 0.35s linear;
    /* Chrome, Safari, 新版 Opera */
}

@keyframes scale {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-webkit-keyframes scale {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

.shake-animation {
    animation: shake 0.35s linear;
    -webkit-animation: shake 0.35s linear;
    /* Chrome, Safari, 新版 Opera */
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

@-webkit-keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}
</style>